<template>
    <el-container class="full-height"> <!-- 添加容器高度样式类 -->
        <!--左侧--> <!--运行后：<aside class="el-aside" style="--el-aside-width: 200px;"> Aside </aside> -->
        <el-aside width="150px" class="aside-container"> <!-- 添加自定义类名 -->
            <img class="loginImg" src="../assets/login.png">
            <div class="loginTitle">欢迎使用动力云客系统</div>
        </el-aside>
        <!--右侧-->
        <el-main class="login-container"> <!-- 应用居中容器样式 -->
            <div class="login-content"> <!-- 添加内容包裹容器 -->
                <div class="welcome">
                    <h1>欢迎登录</h1>
                </div>
                <el-form label-width="55px" style="width: 30%; margin: auto;" :model="user" :rules="userRules"
                         ref="userFormRef">
                    <el-form-item label="账号" prop="loginAct">
                        <el-input
                            v-model="user.loginAct"
                            type="text"
                            placeholder="请输入账号"
                        />
                    </el-form-item>
                    <el-form-item label="密码" prop="loginPwd">
                        <el-input
                            v-model="user.loginPwd"
                            type="password"
                            placeholder="请输入密码"
                            show-password
                        />
                    </el-form-item>
                </el-form>
                <el-form-item style="width: 30%; margin: auto;">
                    <el-button @click="login(userFormRef)" type="primary">登 录</el-button>
                </el-form-item>
            </div>
        </el-main>
    </el-container>
</template>

<script setup>
// 导入Vue的ref函数用于创建响应式数据
import {ref} from 'vue';
// 导入自定义的POST请求工具函数
import {doPost} from '../http/httpRequest';
import {TOKEN} from "../util/constant.js";
import {showMessage} from "../util/message.js";

// 创建用户对象的响应式引用，用于绑定表单数据
let user = ref({});
// 创建表单引用，用于表单验证
let userFormRef = ref();

// 定义表单验证规则
let userRules = {
    // 登录账号验证规则
    loginAct: [
        {required: true, message: '请输入登录账号', trigger: 'blur'},
        {min: 2, max: 30, message: '登录账号必须是2-30个字符', trigger: 'blur'},
    ],
    // 登录密码验证规则
    loginPwd: [
        {required: true, message: '请输入登录密码', trigger: 'blur'},
        {min: 6, max: 16, message: '登录密码长度必须是6-16个字符', trigger: 'blur'}
    ]
}

// 登录函数 - 接收表单元素作为参数
const login = (formEl) => {
    // 如果表单元素不存在，则返回不执行验证
    if (!formEl) {
        return;
    }
    // 执行表单验证
    formEl.validate(valid => {
        if (valid) {
            // 验证通过，获取表单数据
            let loginAct = user.value.loginAct;
            let loginPwd = user.value.loginPwd;

            // 创建FormData对象用于提交表单数据
            let formData = new FormData();
            formData.append("loginAct", loginAct);
            formData.append("loginPwd", loginPwd);

            // 调用POST请求工具发送登录请求
            doPost('/api/login', formData).then((resp) => {
                // 处理登录响应结果
                if (resp.data.code == 200) {
                    // 登录成功，将token存储到sessionStorage
                    window.sessionStorage.setItem(TOKEN, resp.data.info);
                    // 登录成功，跳转到首页
                    window.location.href = '/dashboard';
                } else {
                    // 登录失败，显示错误消息
                    showMessage(resp.data.msg, 'error');
                }
            })
        }
    })
}
</script>

<style scoped>
.el-aside {
    background: #303133;
    height: calc(100vh);
    width: 30%;
    text-align: center;
}

.loginImg {
    margin-top: 100px;
    margin-bottom: 50px;
    width: 500px;
}

.loginTitle {
    color: #f8f8f8;
    font-size: 28px;
}

.el-main {
    text-align: center;
    padding-top: 100px;
}

.welcome {
    margin-bottom: 30px;
    font-weight: bold;
}

.el-button {
    width: 100%;
}

/* 添加全屏高度样式 */
.full-height {
    height: 100vh;
    margin: 0;
}

/* 登录容器样式 */
.login-container {
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
    height: 90%;
    padding: 0;
}

/* 内容包裹容器 */
.login-content {
    display: flex;
    flex-direction: column;
    align-items: center; /* 内部元素水平居中 */
    width: 100%;
}

.welcome {
    margin-bottom: 30px;
    font-weight: bold;
}

/* 侧边栏容器样式 - 实现内部元素居中 */
.aside-container {
    display: flex;
    flex-direction: column;
    align-items: center; /* 水平居中 */
    height: 100%; /* 占满父容器高度 */
    padding: 0px 0; /* 添加上下内边距 */
}

/* 调整图片样式 */
.loginImg {
    max-width: 200px; /* 限制图片宽度 */
    height: auto; /* 保持图片比例 */
    margin-bottom: 20px; /* 图片与标题间距 */
    margin-top: 57.5%;
}

/* 调整标题样式 */
.loginTitle {
    text-align: center; /* 文本水平居中 */
    width: 100%; /* 占满容器宽度 */
    word-wrap: break-word; /* 长文本换行 */
}

</style>